<template>
  <div class="result-wrapper">
    <div class="filter-container">
      <el-input v-model="listQuery.username" placeholder="昵称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="success" icon="el-icon-plus">
        新增
      </el-button>
    </div>

    <dynamic-table v-if="dynamicTableShow" :table-data="tableData" :table-header="tableConfig" />
    <dynamic-form v-else />
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getUserList"
    />
  </div>
</template>

<script>
import { getUserList } from '@/api/user'
import DynamicTable from '@/components/DynamicTable/DynamicTable'
import Pagination from '@/components/Pagination'
export default {
  components: {
    DynamicTable,
    Pagination
  },
  data() {
    return {
      one: true,
      total: 0,
      listQuery: {
        current: 1,
        size: 10,
        username: ''
      },
      searchForm: {
        // month: getMonth(),
        serviceCategory: '1'
      },
      dynamicTableShow: true, // 使得DynamicTable组件重新渲染变量
      // 表数据
      tableData: [
        {
          districtName: '1',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '2',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '3',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '4',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '5',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '6',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '7',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '8',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '9',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '10',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '11',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '12',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '13',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '14',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        },
        {
          districtName: '15',
          timeDimension: '2',
          residentPopNum: '3',
          residentPopDst: '4',
          liveLandArea: '5',
          liveLandDst: '6',
          employmentLandArea: '7',
          employmentLandDst: '8'
        }
      ],
      // 表头数据
      tableConfig: [
        {
          id: 100,
          label: '一级表头',
          prop: '',
          children: [
            {
              id: 110,
              label: '编号',
              prop: 'id'
            },
            {
              id: 120,
              label: '账号',
              prop: 'account'
            }
          ]
        },
        {
          id: 200,
          label: '一级表头1',
          prop: '',
          children: [
            {
              id: 210,
              label: '二级表头2',
              prop: '',
              children: [
                {
                  id: 211,
                  label: '三级表头3',
                  prop: 'delFlag'
                },
                {
                  id: 212,
                  label: '三级表头',
                  prop: 'gmtDatetime'
                }
              ]
            }
          ]
        },
        {
          id: 300,
          label: '一级表头1',
          prop: '',
          children: [
            {
              id: 310,
              label: '二级表头2',
              prop: '',
              children: [
                {
                  id: 311,
                  label: '三级表头3',
                  prop: 'rolenames'
                },
                {
                  id: 312,
                  label: '三级表头3',
                  prop: 'state'
                }
              ]
            },
            {
              id: 320,
              label: '二级表头1',
              prop: '',
              children: [
                {
                  id: 321,
                  label: '三级表头3',
                  prop: 'username'
                },
                {
                  id: 322,
                  label: '三级表头3',
                  prop: 'uptDatetime'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  created() {
    // this.getList()
    this.getUserList(this.listQuery)
    this.total = 11
  },
  methods: {
    handleFilter() {
      this.listQuery.current = 1
      alert(this.listQuery.username)
    },
    // 获取用户列表
    async getUserList(listQuery) {
      // console.log(this.$store.getters.name)
      const res = await getUserList(this.listQuery)
      // console.log(res)
      this.tableData = res.data.data.data
      const listlength = res.data.data.count
      this.total = listlength
    },
    getList() {
      if (this.one) {
        console.log(111)
        this.data = this.tableData.splice(10)
        // this.data = this.tableData
      } else {
        console.log(222)
        this.data = this.tableData.splice(2, 10)
      }
      console.log(this.tableData)
      this.one = !this.one
    },
    // 服务类型改变的时候，需要重新请求表头信息和表格数据
    handleServiceCategoryChange(val) {
      // 设置dynamicTableShow为false，使得DynamicTable组件重新渲染
      this.dynamicTableShow = false
      if (val === '1') {
        this.tableData = [
          {
            districtName: '1',
            timeDimension: '2',
            residentPopNum: '3',
            residentPopDst: '4',
            liveLandArea: '5',
            liveLandDst: '6',
            employmentLandArea: '7',
            employmentLandDst: '8'
          }
        ]
        this.tableConfig = [
          {
            id: 100,
            label: '一级表头',
            prop: '',
            children: [
              {
                id: 110,
                label: '二级表头1',
                prop: 'districtName'
              },
              {
                id: 120,
                label: '二级表头2',
                prop: 'timeDimension'
              }
            ]
          },
          {
            id: 200,
            label: '一级表头1',
            prop: '',
            children: [
              {
                id: 210,
                label: '二级表头2',
                prop: '',
                children: [
                  {
                    id: 211,
                    label: '三级表头3',
                    prop: 'residentPopNum'
                  },
                  {
                    id: 212,
                    label: '三级表头',
                    prop: 'residentPopDst'
                  }
                ]
              }
            ]
          },
          {
            id: 300,
            label: '一级表头1',
            prop: '',
            children: [
              {
                id: 310,
                label: '二级表头2',
                prop: '',
                children: [
                  {
                    id: 311,
                    label: '三级表头3',
                    prop: 'liveLandArea'
                  },
                  {
                    id: 312,
                    label: '三级表头3',
                    prop: 'liveLandDst'
                  }
                ]
              },
              {
                id: 320,
                label: '二级表头1',
                prop: '',
                children: [
                  {
                    id: 321,
                    label: '三级表头3',
                    prop: 'employmentLandArea'
                  },
                  {
                    id: 322,
                    label: '三级表头3',
                    prop: 'employmentLandDst'
                  }
                ]
              }
            ]
          }
        ]
      } else {
        this.tableData = [
          {
            districtName: '111',
            timeDimension: '222'
          }
        ]
        this.tableConfig = [
          {
            id: 100,
            label: '一级表头',
            prop: '',
            children: [
              {
                id: 110,
                label: '二级表头1',
                prop: 'districtName'
              },
              {
                id: 120,
                label: '二级表头2',
                prop: 'timeDimension'
              }
            ]
          }
        ]
      }
      // 此处是DOM还没有更新，此处的代码是必须的
      this.$nextTick(() => {
        // DOM 现在更新了
        this.dynamicTableShow = true
      })
    }
  }
}
</script>

<style scoped>
.policy-wrapper{
  margin-top: 10px;
}
.result-wrapper{
  margin-top: 22px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
